import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'
// 准备一个装载消息提示组件容器
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
// 定时器标识
let timer = null
export default (type, text) => {
  // 渲染组件
  // 1.导入消息提示组件
  // 2.将消息提示组件编译为虚拟节点(dom节点)
  // 2个参数 组件、属性对象（props）
  const vnode = createVNode(XtxMessage, { type, text })
  // 3.准备一个装载消息提示组件容器
  // 4.将虚拟节点渲染在容器中
  // render(虚拟节点，dom容器)
  render(vnode, div)
  // 5. 开启定时，移出DOM容器内容
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}
